package com.wxn.learncompose.pagers

import AnimState
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.SpringSpec
import androidx.compose.animation.core.TweenSpec
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.wxn.learncompose.R

@Composable fun AnimPager4() {
    var selectedAnimState : AnimState by remember{ mutableStateOf(AnimState.END) }
    val updateTranse = updateTransition(targetState = selectedAnimState, label = "swith_page_anim")
    val animColor : Color by updateTranse.animateColor(
        label = "") {
        when(it) {
            AnimState.START -> Color(0xFF000000)
            AnimState.END -> Color.Transparent
            else -> Color.Transparent
        }
    }

    val tranx1 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> -300f
            AnimState.END -> -10f
            else -> -10f
        }
    }

    val trany1 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 400f
            AnimState.END -> -11f
            else -> -11f
        }
    }

    val tranx2 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> -300f
            AnimState.END -> 5f
            else -> 5f
        }
    }

    val trany2 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> -320f
            AnimState.END -> -3f
            else -> -3f
        }
    }

    val tranx3 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 310f
            AnimState.END -> -5f
            else -> -5f
        }
    }

    val trany3 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> -320f
            AnimState.END -> 8f
            else -> 8f
        }
    }

    val tranx4 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 310f
            AnimState.END -> 6f
            else -> 6f
        }
    }

    val trany4 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 320f
            AnimState.END -> -2f
            else -> -2f
        }
    }

    val tranx5 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 110f
            AnimState.END -> 15f
            else -> 15f
        }
    }

    val trany5 : Float by updateTranse.animateFloat(label = "", transitionSpec = { tweenSpec() }) {
        when(it) {AnimState.START -> 480f
            AnimState.END -> 9f
            else -> 9f
        }
    }


    Box(modifier = Modifier
        .fillMaxSize()
        .clickable {
            if (selectedAnimState == AnimState.END) {
                selectedAnimState = AnimState.START
            } else {
                selectedAnimState = AnimState.END
            }
        },
        contentAlignment = Alignment.Center) {
        Image(painter = painterResource(id = R.drawable.wallpaper),  //背景图片
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )

        Spacer(modifier = Modifier  //黑色背景
            .fillMaxSize()
            .background(animColor))

//        Box(modifier = Modifier.size(5.dp).clip(CircleShape)
//            .background(Color.Gray)
////            .align(Alignment.Center)
//            .graphicsLayer {
//                translationX = tranx
//                translationY = tranY
//            })
        Image(painter = painterResource(id = R.drawable.reddot), contentDescription = ""
        ,modifier = Modifier.size(5.dp).graphicsLayer {
                translationX = tranx1
                translationY = trany1
            })
        Image(painter = painterResource(id = R.drawable.reddot), contentDescription = ""
        ,modifier = Modifier.size(5.dp).graphicsLayer {
                translationX = tranx2
                translationY = trany2
            })
        Image(painter = painterResource(id = R.drawable.reddot), contentDescription = ""
        ,modifier = Modifier.size(5.dp).graphicsLayer {
                translationX = tranx3
                translationY = trany3
            })
        Image(painter = painterResource(id = R.drawable.reddot), contentDescription = ""
        ,modifier = Modifier.size(5.dp).graphicsLayer {
                translationX = tranx4
                translationY = trany4
            })
        Image(painter = painterResource(id = R.drawable.reddot), contentDescription = ""
        ,modifier = Modifier.size(5.dp).graphicsLayer {
                translationX = tranx5
                translationY = trany5
            })
    }
}

@Composable
private fun tweenSpec() : TweenSpec<Float> =
//    tween(1500,  easing = FastOutSlowInEasing)
    tween(1500,  easing = LinearOutSlowInEasing)

@Composable
private fun springSpec(): SpringSpec<Float> =
    spring(dampingRatio = 1.5f, stiffness = Spring.StiffnessVeryLow)